<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示元素的显示模式</title>
</head>
<style>
  body{
    height: 600px;
  }
  div{
    /*内部和外部的显示类型 block-生成一个块级元素盒(默认值)、inline-生成一个或多个内联元素盒、
    none-将盒子隐藏起来、flex-该元素的行为类似块级元素并且根据弹性盒模型布局它的内容、
    grid-该元素的行为类似块级元素并且根据网格模型布局它的内容、inline-block-生成一个内联块级元素盒*/
    display: inline-block;
    text-align: center;
    padding-top: 13%;
  }
  div:nth-of-type(1){
    width: 33.01%;
    height: 33.33%;
    background-color: skyblue;
  }
  div:nth-of-type(2){
    width: 33.01%;
    height: 33.33%;
    background-color: pink;
  }
  div:nth-of-type(3){
    width: 33.01%;
    height: 33.33%;
    background-color: aqua;
  }
  a{
    /*a标签本来是行内元素,不能设置宽高，我们使用display将a便签改为块元素，就能够修改宽高了*/
    display: block;
    width: auto;
    height: auto;
  }
</style>
<body>
  <div>张三</div>
  <div>李四</div>
  <div>王五</div>
  <a href="#">asd</a>
  <a href="#">dsa</a>
</body>
</html>